<template>
  <el-dialog title="新增用户" :visible.sync="dialogVisible" width="30%" :append-to-body="true">
    <el-form ref="addForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="用户名" prop="usrName">
        <el-input v-model="form.usrName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passwd">
        <el-input v-model="form.passwd" show-password></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="form.realName"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="certNo">
        <el-input v-model="form.certNo"></el-input>
      </el-form-item>
      <el-form-item label="电话号码" prop="mobile">
        <el-input v-model="form.mobile"></el-input>
      </el-form-item>
      <el-form-item label="电子邮件" prop="email">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="note">
        <el-input type="textarea" v-model="form.note"></el-input>
      </el-form-item>
      <el-form-item label="用户角色">
        <el-select v-model="form.roles" multiple style="width:100%">
          <el-option
            v-for="item in data"
            :key="item.objectId"
            :label="item.name"
            :value="item.objectId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属部门" prop="depts">
        <TreeSelect
          :data="deptData"
          :width="432"
          multiple
          :check-strictly="true"
          :checkedKeys="defaultCheckedKeys"
          :defaultProps="defaultProps"
          @popoverHide="popoverHide"
        ></TreeSelect>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-radio-group v-model="form.type">
          <el-radio-button label="超级管理员" />
          <el-radio-button label="一般用户" />
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('addForm')">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import TreeSelect from "@/components/basic-treeselect/treeselect";
import { baseUrl } from "@/config/env";
import { checkUnique } from "@/checkunique.js";
const urls = {
  save: baseUrl + "/cp/usr/au-usr/add",
  list: baseUrl + "/cp/role/au-role/select_list",
  dept_list: baseUrl + "/cp/dept/au-dept/tree",
  check_unique: baseUrl + "/cp/check_unique"
};
export default {
  data() {
    return {
      dialogVisible: false,
      data: [],
      deptData: [],
      defaultCheckedKeys: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      form: {
        usrName: null,
        passwd: null,
        realName: null,
        certNo: null,
        mobile: null,
        email: null,
        roles: [],
        depts: null,
        type: "一般用户",
        note: null
      },
      formInline: {},
      rules: {
        usrName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              checkUnique(baseUrl, "t_au_usr", "USR_NAME", value).then(data => {
                if (data) {
                  return callback(new Error("该用户名已经存在"));
                }else {
                  return callback();
                }
              });
            },
            trigger: "blur"
          }
        ],
        passwd: [
          { required: true, message: "请输入登录密码", trigger: "blur" }
        ],
        email: [{ type: "email", message: "邮箱格式不正确", trigger: "blur" }]
      }
    };
  },
  components: {
    TreeSelect
  },
  methods: {
    popoverHide(checkedIds, checkedData) {
      this.form.depts = checkedIds.toString();
    },
    show() {
      this.dialogVisible = true;
      if (this.$refs["addForm"]) {
        this.form.roles = [];
        this.form.deptData = [];
        this.$refs["addForm"].resetFields();
      }
      this.fetch();
    },
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.form.roles = this.form.roles.toString();
          this.form.type = this.form.type == "一般用户" ? 1 : 0;
          axios.post(urls.save, this.form).then(res => {
            this.$message(res.data.result);
            this.dialogVisible = false;
            this.$emit("refresh");
          });
        }
        return false;
      });
    },
    fetch() {
      axios.post(urls.list).then(res => {
        this.data = res.data.result;
      });
      axios.get(urls.dept_list).then(res => {
        this.deptData = res.data.result;
      });
    }
  }
};
</script>